<template>
  <div class="logisticsBox">
    <header-box title="物流详情" :showLeft="true" :showRight="true"></header-box>
    <ul class="goodsUl">
      <li class="goodsLi flex">
        <div class="imgBox">
          <previewer :list="list" ref="previewer"></previewer>
          <img
            src="../assets/images/691905630212266011315978.jpg"
            class="goodsImg"
            @click="show(0)"
          />
          <p>共2件商品</p>
        </div>
        <div class="introduce">
          <p class="status">已签收</p>
          <div class="flex">
            {{order.courierName}}：
            <span>{{order.courierNum}}</span>
            <img
              src="../assets/images/copyicon.png"
              alt
              v-clipboard:copy="order.courierNum"
              v-clipboard:success="copyNum"
              v-clipboard:error="onError"
            />
          </div>
          <div>
            {{order.orderNumName}}：
            <span>{{order.orderNum}}</span>
          </div>``
          <div>
            物流电话：
            <a :href="'tel:' + 110">95589</a>
          </div>
          <div class="service">联系客服</div>
        </div>
      </li>
    </ul>
    <div class="shaftBox">
      <ul>
        <li v-for="(item,index) in order.logistics" :key="index">
          <div class="time">
            <div>{{item.date}}</div>
            <div>{{item.time}}</div>
          </div>
          <div class="infoBox">{{item.address}}</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import HeaderBox from '@/components/header'
import { Previewer } from 'vux'
export default {
  components: {
    HeaderBox,
    Previewer
  },
  data() {
    return {
      order: {
        courierName: '韵达快递',
        courierNum: 12211112211,
        orderNumName: '订单编号',
        orderNum: 1234523412,
        logistics: [
          {
            date: '2020-01-02',
            time: '08:23',
            address:
              '【北京市】北京昌平区龙跃公司 派件员 王波 17545151958 正在为您派件'
          },
          {
            date: '2020-01-01',
            time: '20:23',
            address: '【北京市】已离开 北京分拨中心；发往 北京昌平区龙跃公司'
          },
          {
            date: '2020-01-01',
            time: '20:23',
            address: '【郑州市】已离开 河南郑州分拨中心；发往 北京分拨中心'
          },
          {
            date: '2019-12-31',
            time: '08:54',
            address: '【郑州市】已离开 河南郑州公司；发往 京西地区包'
          },
          {
            date: '2019-12-30',
            time: '02:54',
            address: '【郑州市】河南郑州公司 已揽收'
          },
          {
            date: '2019-12-29',
            time: '17:24',
            address: '您的订单已支付完成，百草味官方旗舰店正在为您发货'
          }
        ]
      },
      list: [
        {
          src: require('../assets/images/691905630212266011315978.jpg')
        },
        {
          src: require('../assets/images/720562338979054975386562.jpg')
        }
      ]
    }
  },
  mounted() {
    document
      .querySelector('body')
      .setAttribute('style', 'background-color:#f8f9fa')
  },
  beforeDestroy() {
    document.querySelector('body').removeAttribute('style')
  },
  methods: {
    copyNum(e) {
      this.$copyText(e.text).then(this.$vux.toast.text('复制成功'))
    },
    onError(e) {
      alert('Failed to copy texts')
    },
    show(index) {
      this.$refs.previewer.show(index)
    }
  }
}
</script>

<style lang="less" scoped>
.logisticsBox {
  .goodsUl {
    background-color: #fff;
    border-radius: 20px;
    margin: 20px;
    padding: 20px;
    .goodsLi {
      list-style: none;
      margin-bottom: 20px;
      align-items: flex-start;
      &:last-child {
        margin-bottom: 0;
      }
      .imgBox {
        flex-shrink: 0;
        position: relative;
        border-radius: 20px;
        overflow: hidden;
        .goodsImg {
          width: 150px;
          display: block;
        }
        p {
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          height: 40px;
          background: rgba(0, 0, 0, 0.6);
          color: #fff;
          font-size: 30px;
          text-align: center;
        }
      }

      .introduce {
        margin-left: 20px;
        flex-grow: 1;
        .status {
          font-size: 30px;
          color: #f50;
        }
        div {
          font-size: 28px;
          margin: 2px 0;
          img {
            width: 30px;
          }
          span {
            margin: 0 10px;
          }
        }
        .service {
          border-radius: 20px;
          padding: 5px 20px;
          border: 2px solid #ddd;
          color: #666;
          display: inline-block;
        }
      }
    }
  }
  .shaftBox {
    background-color: #fff;
    border-radius: 20px;
    margin: 20px;
    padding: 20px;
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
      li {
        display: flex;
        align-items: flex-start;
        font-size: 30px;
        color: #666;
        &:first-child {
          color: #000;
        }
        &:last-child .infoBox {
          border-left: 0;
        }

        .time {
          flex-shrink: 0;
          width: 180px;
          padding-right: 20px;
          overflow-wrap: break-word;
        }
        .infoBox {
          padding-left: 50px;
          padding-bottom: 50px;
          border-left: 1px solid #e4e4e4;
          flex-grow: 1;
          position: relative;

          &::before {
            content: '';
            position: absolute;
            top: 0px;
            left: -18px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 10px solid #fff;
            background-color: #eee;
          }
        }
      }
    }
  }
}
</style>